<html>  
<head>  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
	<title>模拟音频条 </title>  
</head>  
<body>  
	播放间隔: ms  
	<input type="button" onClick="c.stopPlay();c.play(100)" value="0.1秒">  
	<input type="button" onClick="c.stopPlay();c.play(500)" value="0.5秒">  
	<input type="button" onClick="c.stopPlay();c.play(1000)" value="1秒">  
	<input type="button" onClick="c.stopPlay();c.play(2000)" value="2秒">  
	<input type="button" onClick="c.stopPlay();" value="stop">  
	<input type="button" onClick="c.stopPlay();c.play(100,ar);" value="播放1">  
	<input type="button" onClick="c.stopPlay();c.play(100,ar1);" value="播放2">  
	<input type="button" onClick="c.stopPlay();c.play(100,ar2);" value="播放3"> 

	<style>
		.box {  
			position:relative;  
			width:310px;  
			height:15px;  
			border:1px solid #AAA;  
			font-size:13px;  
			text-align:left;  
			line-height:25px;
		}  
		  
		.colorLay{  
			margin-top:2px;  
			margin-left:2px;  
			height:11px;  
			width:40%;  
			background-color:#B667FF;
		}  
			  
		.box {  
			position:relative;  
			width:310px;  
			height:15px;  
			border:1px solid #AAA;  
			font-size:13px;  
			text-align:left;  
			line-height:25px;
		}  
		  
		.colorLay{  
			margin-top:2px;  
			margin-left:2px;  
			height:11px;  
			width:40%;  
			background-color:#B667FF;
		}  
    </style> 
	<script>
	/** 
	 * CreateBar (FF,IE6/7/8,opera) 
	 *  
	 * verson: 3.0 (20081224) 
	 * author: yangf 
	 * email:  yan-guofeng@126.com 
	 */   
	  
	function id(elem){  
		return document.getElementById(elem) || document.body[elem];  
	}  
		/** 
		 * CreateBar 创建音频条的构造函数 
		 * @param {Number} n  -  必须  音频条的数目 
		 */
		function CreateBar(n) {
			if ((typeof n) !== "number" || n < 1) return;
			this.num = n;
			// 循环创建音频条  
			for (i = 0; i < n; i++) this.CB(i, 0);
		}
		 
		/** 
		 * @method CB - 创建音频条的方法 
		 * @param {Number} n  -  必须  音频条的数目 
		 * @param {Number} width    -  必须  创建时音频条的宽度 
		 */
		CreateBar.prototype.CB = function(n, width) {
			/* 
			 *创建如下的DOM 
			 *<div class="box"> 
			 *<div class="colorLay"></div> 
			 *</div> 
			 */
			var box = document.createElement("div");
			box.className = "box";
			box.innerHTML = "<div class='colorLay' id='cb" + n
					+ "' style='width:" + width
					+ "%' onclick='alert(this.id)'></div>";
			document.body.appendChild(box);
		}
		CreateBar.prototype.play = function(speed, ar) {
			var n = this.num;
			if (arguments.length == 1) { //没有数组,则随机播放  
				this.a = setInterval(function() {
					// 循环更改每个音频条的长度  
					for (var i = 0; i < n; i++) {
						// 改长度为随机数(1~100)  
						var r = Math.random() * 100;
						var c = id("cb" + i);
						c.style.width = r + "%";
					}
				}, speed);
			} else { // 如果有数组参数传递进来  
				var k = 0; // 数组的第一维是播放时间(第几秒),如果播放完毕则从头再开始  
				this.a = setInterval(function() {

					// 循环更改每个音频条的长度  
					for (var i = 0; i < n; i++) {
						var c = id("cb" + i);
						c.style.width = ar[k][i][1] + "%";
					}
					k++;
					if (k == ar.length) k = 0; // 播放完毕,从头开始计数  
				}, speed);
			}
		}

		/** 
		 * @method stopPlay - 停止播放的方法 
		 */
		CreateBar.prototype.stopPlay = function() {
			if (this.a) clearInterval(this.a);
		}

		var ar = new Array([ [ 1, 10 ], [ 2, 20 ], [ 3, 30 ], [ 4, 40 ] ], [
				[ 1, 20 ], [ 2, 30 ], [ 3, 40 ], [ 4, 50 ] ], [ [ 1, 30 ],
				[ 2, 40 ], [ 3, 50 ], [ 4, 60 ] ], [ [ 1, 40 ], [ 2, 50 ],
				[ 3, 60 ], [ 4, 70 ] ], [ [ 1, 50 ], [ 2, 60 ], [ 3, 70 ],
				[ 4, 80 ] ])

		var ar1 = new Array([ [ 1, 60 ], [ 2, 10 ], [ 3, 10 ], [ 4, 60 ] ], [
				[ 1, 40 ], [ 2, 20 ], [ 3, 20 ], [ 4, 40 ] ], [ [ 1, 60 ],
				[ 2, 10 ], [ 3, 10 ], [ 4, 60 ] ], [ [ 1, 40 ], [ 2, 20 ],
				[ 3, 20 ], [ 4, 40 ] ], [ [ 1, 60 ], [ 2, 10 ], [ 3, 10 ],
				[ 4, 60 ] ])

		var ar2 = new Array([ [ 1, 60 ], [ 2, 50 ], [ 3, 40 ], [ 4, 30 ] ], [
				[ 1, 50 ], [ 2, 60 ], [ 3, 50 ], [ 4, 40 ] ], [ [ 1, 40 ],
				[ 2, 50 ], [ 3, 60 ], [ 4, 50 ] ], [ [ 1, 30 ], [ 2, 40 ],
				[ 3, 50 ], [ 4, 60 ] ])

		var c = new CreateBar(4);
		c.play(100);
	</script>
</body>  
</html> 